<template>
    <div class="choose">
        <ul>
            <li v-for="(item,index) in data" :key="index" class="choose-radio" :style="{
                width: width,
                height: height
            }">
                <label>
                    <input type="radio" :name="group" class="choose-input" :value="item.value" v-model="select">
                    <div class="choose-item" :style="{padding:padding}">
                        <img :src="item.active" v-if="is_active(item)">
                        <img :src="item.src" v-else>
                    </div>
                </label>
            </li>
        </ul>
    </div>
</template>
<script type="text/javascript">
export default {
    props: {
        modelValue: {
            type: [String, Number],
            default: ""
        },
        width: {
            type: [String, Number],
            default: '248px'
        },
        height: {
            type: [String, Number],
            default: '60px'
        },
        padding: {
            type: [String, Number],
            default: '6px'
        },
        group: {
            type: [String, Number],
            default: 'choose'
        },
        data: {
            type: Array
        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        select: {
            get() {
                return this.modelValue
            },
            set(value) {
                this.$emit('update:modelValue', value);
            }
        }
    },
    methods: {
        is_active(item) {
            if (item.active) {
                if (item.value === this.modelValue) {
                    return true;
                }
            }
            return false;
        }
    }
};
</script>
<style lang="less" scoped>
@import './choose.less';
</style>